<script setup lang="ts">
interface IZHDataModal {
    indexes: string;
    title: string;
    content: string;
    heat: string;
    href: string;
};

import { ref } from 'vue';
import { getZHHotNews } from '../api';
const onClickLeft = () => history.back();
const list = ref<IZHDataModal[]>([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    getZHHotNews().then(res => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }
        loading.value = false;
        if (res.code === 1) {
            list.value = res.data;
        }
        finished.value = true;
    })
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};

const goTo = (item: IZHDataModal) => {
    window.location.href = item.href;
}
</script>

<template>
    <div class="WBHotSearch">
        <van-nav-bar title="知乎热搜" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in list" :key="item.indexes" @click="goTo(item)">
                    <template #title>
                        <div style="display: flex;">
                            <span style="width: 1.5rem; color: coral;">{{ item.indexes }}</span>
                            <span style="flex: 1;display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示的行数 */
  overflow: hidden;">{{ item.title }}</span>
                            <span style="width: 4.8rem; margin-left: 1rem;"><van-tag type='warning'>{{
            item.heat }}</van-tag></span>
                        </div>

                    </template>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<style scoped>
.mine {
    /* display: flex; */
}

.header {
    display: flex;
    padding: 1rem 0;
    justify-content: center;
}
</style>